<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
    <%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Insert title here</title>
<style type="text/css">
	*{
		margin: 0;
		padding: 0;
	}
	#employees{
	display: inline-block;
	margin-left: 120px;
    margin-top: 80px;
		}
	#employees li{
	background-color: green;
	border: thin solid red;
	list-style: none;
	height:50px;
	line-height: 25px;	
	position: relative;
	}
	span{
	position: relative;
	top: 13px;
	color: red;
	}
</style>
</head>
<body>
		<h1>欢迎来到员工页面!</h1>
	<input name="serach" value="" placeholder="查询" id="serach">
	
	<a href="" onclick="getkey(this)">点击搜索</a>
	<form action="http://localhost/sm/employee/insert">
	 <input name="id" value="" placeholder="ID">
	 <input name="name" value="" placeholder="姓名">
	 <input name="uPhone" value="" placeholder="电话">
	 <input name="uAge" value="" placeholder="年龄">
	 <input name="uSalary" value="" placeholder="薪水">
	 <input name="jiangjin" value="" placeholder="奖金">
	 <select>
	 	<c:forEach items="${requestScope.employees}" var="depts">
		<option value="${depts.dept.id}">${depts.dept.deptName}</option>
		</c:forEach>
	</select>
	 <input name="deptAddr" value="" placeholder="部门地址">
	 <input type="submit" value="添加"> 
	 
	 <span>${session.phones}</span>
	<ul id="employees">
	<li>
	<span>ID:&nbsp;${requestScope.phones.id}</span>&nbsp;
	<span>姓名:&nbsp;${requestScope.phones.name}</span>&nbsp;
	<span>电话:&nbsp;${requestScope.phones.uPhone}</span>
	<span>年龄:&nbsp;${requestScope.phones.uAge}</span>
	<span>薪水:&nbsp;${requestScope.phones.uSalary}</span>
	<span>奖金:&nbsp;${requestScope.phones.jiangjin}</span>&nbsp;
	<span>d_Id:&nbsp;${requestScope.phones.dId}</span>
	<span>图片地址:&nbsp;${requestScope.phones.headimg}</span>
	<span>部门ID:&nbsp;${(requestScope.phones.dept).id}</span> &nbsp;
	<span>部门名称:&nbsp;${(requestScope.phones.dept).deptName}</span>&nbsp;
	<span>部门地址:&nbsp;${(requestScope.phones.dept).deptAddr}</span>
	</li>
	</ul>
		 <ul id="employees"><c:forEach items="${requestScope.employees}" var="e">
			<li>
				<span>ID:&nbsp;${e.id}</span>&nbsp;
				<span>姓名:&nbsp;${e.name}</span>&nbsp;
				<span>电话:&nbsp;${e.uPhone}</span>
				<span>年龄:&nbsp;${e.uAge}</span>
				<span>薪水:&nbsp;${e.uSalary}</span>
				<span>奖金:&nbsp;${e.jiangjin}</span>&nbsp;
				<span>d_Id:&nbsp;${e.dId}</span>
				<span>图片地址:&nbsp;${e.headimg}</span>
				<span>部门ID:&nbsp;${(e.dept).id}</span> &nbsp;
				<span>部门名称:&nbsp;${(e.dept).deptName}</span>&nbsp;
				<span>部门地址:&nbsp;${(e.dept).deptAddr}</span>
				
			</li>
			<a href="http://localhost/sm/employee/delete?id=${e.id}">删除</a>
			</c:forEach>
		</ul> 
		</form>
</body>
<script type="text/javascript">
    function getkey(a) {
        var pms =document.getElementById("serach").value;
 		 a.href = 'http://localhost/sm/employee/findById?Key=' + pms;
  }
</script>
</html>